<template>
  <div class="tabbar">
    <div v-for="(item, index) in tabList" :key="index" class="tabbar-item"
      :class="{ active: currentTab === item.value }" @click="handleTabClick(item)">
      <i :class="['iconfont', item.icon]"></i>
      <span class="tabbar-text">{{ item.label }}</span>
      <span v-if="item.badge" class="badge">{{ item.badge }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineOptions } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const props = defineProps({
  // 当前选中的标签
  modelValue: {
    type: [String, Number],
    default: ''
  },
})

const tabList = reactive([
  {
    label: '首页',
    icon: 'icon-home',
    value: 'home',
    path: 'home'
  },
  {
    label: '用户',
    icon: 'icon-home',
    value: 'user',
    path: 'user'
  }
])

const emit = defineEmits(['update:modelValue', 'change'])

const route = useRoute()
const router = useRouter()

// 当前选中的标签
const currentTab = ref(props.modelValue)



// 监听路由变化
// watch(
//   () => route.path,
//   (newPath) => {
//     const currentTabItem = tabList.value.find(item => item.path === newPath)
//     if (currentTabItem) {
//       currentTab.value = currentTabItem.value
//     }
//   },
//   { immediate: true }
// )

// 处理标签点击
const handleTabClick = (item) => {
  console.log(item)


  // 如果有路由路径，进行跳转
  if (item.path) {
    router.push(item.path)
  }
}

defineOptions({
  name: 'tabbar'
})
</script>

<style lang="scss" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: #fff;
  display: flex;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 0;

    .iconfont {
      font-size: 40px;
      color: #666;
      margin-bottom: 4px;
    }

    .tabbar-text {
      font-size: 24px;
      color: #666;
    }

    .badge {
      position: absolute;
      top: 0;
      right: 50%;
      transform: translateX(20px);
      background: #ff4242;
      color: #fff;
      font-size: 20px;
      padding: 0 10px;
      height: 32px;
      line-height: 32px;
      border-radius: 16px;
      min-width: 32px;
      text-align: center;
    }

    &.active {
      .iconfont {
        color: #ff7a18;
      }

      .tabbar-text {
        color: #ff7a18;
      }
    }

    &.disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}
</style>
